<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Boutique Pictures</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css' />

</head>
<body>

	<div class="iw_wrapper">
		<ul class="iw_thumbs" id="iw_thumbs">
			<li><img src="images/thumbs/1.jpg" data-img="images/full/1.jpg" alt="Thumb1"/><div><h2>妃色影堂</h2><p>个性、自然、生动的瞬间变成您一张张此生难忘的记忆.</p></div></li>
			<li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb2"/><div><h2>伊莎贝儿</h2><p>高端婚纱摄影品牌</p></div></li>
			<li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb3"/><div><h2>拾尚风格</h2><p>最时尚的拍摄手法，不拘一格的风格创意</p></div></li>
			<li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb6"/><div><h2>云日影像</h2><p>独到的审美视觉 精湛的专业技术</p></div></li>
			<li><img src="images/thumbs/7.jpg" data-img="images/full/7.jpg" alt="Thumb7"/><div><h2>水晶之恋</h2><p>追求完美 崇尚自然<br>一生不变 水晶之恋</p></div></li>
			<li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb12"/><div><h2>水晶之恋</h2><p>追求完美 崇尚自然<br>一生不变 水晶之恋</p></div></li>
			<li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb4"/><div><h2>360度摄影</h2><p>360度：诚信 贴心 放心 欢欣</p></div></li>
			<li><img src="images/thumbs/5.jpg" data-img="images/full/5.jpg" alt="Thumb5"/><div><h2>云日影像</h2><p>独到的审美视觉 精湛的专业技术</p></div></li>
			<li><img src="images/thumbs/1.jpg" data-img="images/full/1.jpg" alt="Thumb7"/><div><h2>水晶之恋</h2><p>追求完美 崇尚自然<br>一生不变 水晶之恋</p></div></li>
			<li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb13"/><div><h2>伊莎贝儿</h2><p>高端婚纱摄影品牌</p></div></li>
			<li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb14"/><div><h2>水晶之恋</h2><p>追求完美 崇尚自然<br>一生不变 水晶之恋</p></div></li>
			<li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb1"/><div><h2>拾尚风格</h2><p>独特视角，别样的风格，不拘一格的风格创意</p></div></li>
			<li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb2"/><div><h2>拾尚风格</h2><p>别样的风格</p></div></li>
			<li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb3"/><div><h2>伊人湾</h2><p>高端婚纱摄影私人会所</p></div></li>
			<li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb5"/><div><h2>伊缘之恋</h2><p>北京十佳摄影品牌</p></div></li>
			<li><img src="images/thumbs/5.jpg" data-img="images/full/5.jpg" alt="Thumb7"/><div><h2>水晶之恋</h2><p>追求完美 崇尚自然<br>一生不变 水晶之恋</p></div></li>
			<li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb9"/><div><h2>北遇映画</h2><p>嫁娶●季 北遇 爱的疯狂<br>奢华婚照●为您专属</p></div></li>
			<li><img src="images/thumbs/7.jpg" data-img="images/full/7.jpg" alt="Thumb12"/><div><h2>云日影像</h2><p>独到的审美视觉 精湛的专业技术</p></div></li>
			<li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb6"/><div><h2>云日影像</h2><p>独到的审美视觉 精湛的专业技术</p></div></li>
			<li><img src="images/thumbs/7.jpg" data-img="images/full/7.jpg" alt="Thumb7"/><div><h2>水晶之恋</h2><p>追求完美 崇尚自然<br>一生不变 水晶之恋</p></div></li>
			<li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb12"/><div><h2>水晶之恋</h2><p>追求完美 崇尚自然<br>一生不变 水晶之恋</p></div></li>
			<li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb4"/><div><h2>360度摄影</h2><p>360度：诚信 贴心 放心 欢欣</p></div></li>
			<li><img src="images/thumbs/5.jpg" data-img="images/full/5.jpg" alt="Thumb5"/><div><h2>云日影像</h2><p>独到的审美视觉 精湛的专业技术</p></div></li>
			<li><img src="images/thumbs/1.jpg" data-img="images/full/1.jpg" alt="Thumb7"/><div><h2>水晶之恋</h2><p>追求完美 崇尚自然<br>一生不变 水晶之恋</p></div></li>
			<li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb13"/><div><h2>伊莎贝儿</h2><p>高端婚纱摄影品牌</p></div></li>
			<li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb14"/><div><h2>水晶之恋</h2><p>追求完美 崇尚自然<br>一生不变 水晶之恋</p></div></li>
		</ul>
	</div>
	
	<div id="iw_ribbon" class="iw_ribbon">
		<span class="iw_close"></span>
		<span class="iw_zoom"></span>
	</div>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(window).load(function(){
	var $iw_thumbs			= $('#iw_thumbs'),
		$iw_ribbon			= $('#iw_ribbon'),
		$iw_ribbon_close	= $iw_ribbon.children('span.iw_close'),
		$iw_ribbon_zoom		= $iw_ribbon.children('span.iw_zoom');
		
		ImageWall	= (function() {
				// window width and height
			var w_dim,
				// index of current image
				current				= -1,
				isRibbonShown		= false,
				isFullMode			= false,
				// ribbon / images animation settings
				ribbonAnim			= {speed : 500, easing : 'easeOutExpo'},
				imgAnim				= {speed : 400, easing : 'jswing'},
				// init function : call masonry, calculate window dimentions, initialize some events
				init				= function() {
					$iw_thumbs.imagesLoaded(function(){
						$iw_thumbs.masonry({
							isAnimated	: true
						});
					});
					getWindowsDim();
					initEventsHandler();
				},
				// calculate window dimentions
				getWindowsDim		= function() {
					w_dim = {
						width	: $(window).width(),
						height	: $(window).height()
					};
				},
				// initialize some events
				initEventsHandler	= function() {
					
					// click on a image
					$iw_thumbs.delegate('li', 'click', function() {
						if($iw_ribbon.is(':animated')) return false;
						
						var $el = $(this);
						
						if($el.data('ribbon')) {
							showFullImage($el);
						}
						else if(!isRibbonShown) {
							isRibbonShown = true;
							
							$el.data('ribbon',true);
							
							// set the current
							current = $el.index();
						
							showRibbon($el);
						}
					});
					
					// click ribbon close
					$iw_ribbon_close.bind('click', closeRibbon);
					
					// on window resize we need to recalculate the window dimentions
					$(window).bind('resize', function() {
								getWindowsDim();
								if($iw_ribbon.is(':animated'))
									return false;
								closeRibbon();
							 })
							 .bind('scroll', function() {
								if($iw_ribbon.is(':animated'))
									return false;
								closeRibbon();
							 });
					
				},
				showRibbon			= function($el) {
					var	$img	= $el.children('img'),
						$descrp	= $img.next();
					
					// fadeOut all the other images
					$iw_thumbs.children('li').not($el).animate({opacity : 0.2}, imgAnim.speed);
					
					// increase the image z-index, and set the height to 100px (default height)
					$img.css('z-index', 100)
						.data('originalHeight',$img.height())
						.stop()
						.animate({
							height 		: '100px'
						}, imgAnim.speed, imgAnim.easing);
					
					// the ribbon will animate from the left or right
					// depending on the position of the image
					var ribbonCssParam 		= {
							top	: $el.offset().top - $(window).scrollTop() - 6 + 'px'
						},
						descriptionCssParam,
						dir;
					
					if( $el.offset().left < (w_dim.width / 2) ) {
						dir = 'left';
						ribbonCssParam.left 	= 0;
						ribbonCssParam.right 	= 'auto';
					}
					else {
						dir = 'right';
						ribbonCssParam.right 	= 0;
						ribbonCssParam.left 	= 'auto';
					}
					
					$iw_ribbon.css(ribbonCssParam)
							  .show()
							  .stop()
							  .animate({width : '100%'}, ribbonAnim.speed, ribbonAnim.easing, function() {
									switch(dir) {
										case 'left' :
											descriptionCssParam		= {
												'left' 			: $img.outerWidth(true) + 'px',
												'text-align' 	: 'left'
											};
											break;
										case 'right' :	
											descriptionCssParam		= {
												'left' 			: '-200px',
												'text-align' 	: 'right'
											};
											break;
									};
									$descrp.css(descriptionCssParam).fadeIn();
									// show close button and zoom
									$iw_ribbon_close.show();
									$iw_ribbon_zoom.show();
							  });
					
				},
				// close the ribbon
				// when in full mode slides in the middle of the page
				// when not slides left
				closeRibbon			= function() {
					isRibbonShown 	= false
					
					$iw_ribbon_close.hide();
					$iw_ribbon_zoom.hide();
					
					if(!isFullMode) {
					
						// current wall image
						var $el	 		= $iw_thumbs.children('li').eq(current);
						
						resetWall($el);
						
						// slide out ribbon
						$iw_ribbon.stop()
								  .animate({width : '0%'}, ribbonAnim.speed, ribbonAnim.easing); 
							  
					}
					else {
						$iw_ribbon.stop().animate({
							opacity		: 0.8,
							height 		: '0px',
							marginTop	: w_dim.height/2 + 'px' // half of window height
						}, ribbonAnim.speed, function() {
							$iw_ribbon.css({
								'width'		: '0%',
								'height'	: '126px',
								'margin-top': '0px'
							}).children('img').remove();
						});
						
						isFullMode	= false;
					}
				},
				resetWall			= function($el) {
					var $img		= $el.children('img'),
						$descrp		= $img.next();
						
					$el.data('ribbon',false);
					
					// reset the image z-index and height
					$img.css('z-index',1).stop().animate({
						height 		: $img.data('originalHeight')
					}, imgAnim.speed,imgAnim.easing);
					
					// fadeOut the description
					$descrp.fadeOut();

					// fadeIn all the other images
					$iw_thumbs.children('li').not($el).animate({opacity : 1}, imgAnim.speed);								
				},
				showFullImage		= function($el) {
					isFullMode	= true;
					
					$iw_ribbon_close.hide();
					
					var	$img	= $el.children('img'),
						large	= $img.data('img'),
					
						// add a loading image on top of the image
						$loading = $('<span class="iw_loading"></span>');
					
					$el.append($loading);
					
					// preload large image
					$('<img/>').load(function() {
						var $largeImage	= $(this);
						
						$loading.remove();
						
						$iw_ribbon_zoom.hide();
						
						resizeImage($largeImage);
						
						// reset the current image in the wall
						resetWall($el);
						
						// animate ribbon in and out
						$iw_ribbon.stop().animate({
							opacity		: 1,
							height 		: '0px',
							marginTop	: '63px' // half of ribbons height
						}, ribbonAnim.speed, function() {
							// add the large image to the DOM
							$iw_ribbon.prepend($largeImage);
							
							$iw_ribbon_close.show();
							
							$iw_ribbon.animate({
								height 		: '100%',
								marginTop	: '0px',
								top			: '0px'
							}, ribbonAnim.speed);
						});
					}).attr('src',large);
						
				},
				resizeImage			= function($image) {
					var widthMargin		= 100,
						heightMargin 	= 100,
					
						windowH      	= w_dim.height - heightMargin,
						windowW      	= w_dim.width - widthMargin,
						theImage     	= new Image();
						
					theImage.src     	= $image.attr("src");
					
					var imgwidth     	= theImage.width,
						imgheight    	= theImage.height;

					if((imgwidth > windowW) || (imgheight > windowH)) {
						if(imgwidth > imgheight) {
							var newwidth 	= windowW,
								ratio 		= imgwidth / windowW,
								newheight 	= imgheight / ratio;
								
							theImage.height = newheight;
							theImage.width	= newwidth;
							
							if(newheight > windowH) {
								var newnewheight 	= windowH,
									newratio 		= newheight/windowH,
									newnewwidth 	= newwidth/newratio;
							
								theImage.width 		= newnewwidth;
								theImage.height		= newnewheight;
							}
						}
						else {
							var newheight 	= windowH,
								ratio 		= imgheight / windowH,
								newwidth 	= imgwidth / ratio;
							
							theImage.height = newheight;
							theImage.width	= newwidth;
							
							if(newwidth > windowW) {
								var newnewwidth 	= windowW,
									newratio 		= newwidth/windowW,
									newnewheight 	= newheight/newratio;
						
								theImage.height 	= newnewheight;
								theImage.width		= newnewwidth;
							}
						}
					}
						
					$image.css({
						'width'			: theImage.width + 'px',
						'height'		: theImage.height + 'px',
						'margin-left'	: -theImage.width / 2 + 'px',
						'margin-top'	: -theImage.height / 2 + 'px'
					});							
				};
				
			return {init : init};	
		})();
	
	ImageWall.init();
});
</script>
</body>
</html>